<template>
	<view>
		<view   @click="closemask" style="backface-visibility: hidden;top: 0;right: 0;left: 0;bottom: 0;position: fixed;overflow: hidden;width: 100%;height: 100%;opacity: 1;background-color: rgba(0,0,0,0.4);z-index: 9000;">
			<view @click.stop="" :style="{'height':maskheight+'px'}" style="opacity: 1;background-color: #fff;z-index: 9000;bottom: 0px;position: absolute;width: 100vw;">
				<content2 :contentdata="contentdetail1.showdetail"></content2>
				<view  v-for="(item2, index2) in contentdetail1.inputdetail" :key="index2" style="margin: 0 10px;">
					<view v-if="item2.coltype=='date' && item2.visible" :style="{'background-color':!item2.editable?'#fff':'#f8f8f8'}" style="padding:13px 0px;color: #666;font-size: 14px; display: flex;flex-direction: row;justify-content: space-between;">
						<view style="display: flex;align-items: center;">{{item2.coltext}} <view v-if="item2.isnotnull" style="color: #F55C23;font-size: 6px;" class="iconfont icon-jiufuqianbaoicon14"></view> </view>
						<view style="text-align: left;width: 60vw;"> 
							<picker  :mode="item2.coltype" :disabled="!item2.editable" :value="item2.coldisplay" :start="item2.starts" :end="item2.ends" @change="bindDateChange(0,index2,$event)">
								<view class="uni-input" style="color: #aaa;">{{item2.coldisplay}}</view>
							</picker> 
						</view>
					</view>
					<textdigit v-if="(item2.coltype=='text' || item2.coltype=='digit' || item2.coltype=='number' || item2.coltype=='textscan') && item2.visible" :texttype="texttype" :dataobj="item2" :index2="index2" :index3="indexgood" @changeData="changeData(arguments)"></textdigit>
					<stylelayer v-if="item2.coltype=='layer' && item2.visible" :layertype="layertype" :dataobj="item2" :index2="index2" :index3="indexgood" @changeData="changeData(arguments)"></stylelayer>
					<stylelist v-if="item2.coltype=='list' && item2.visible" ref="stylelist" :inputdetail='contentdetail1.inputdetail' :listtype="listtype" :dataobj="item2" :index2="index2" :index3="indexgood" :typeindex="typeindex" :styletype="styletype" :modcode="modcode" @changeData="changeData(arguments)"></stylelist>
					<view v-if="(contentdetail1.inputdetail.length-1) != index2 && item2.visible" style="margin-bottom: 1px; height: 1px;width: 100%;border-bottom: #f0f0f0 1px solid;"></view>
				</view> 
				<!-- #ifdef MP-WEIXIN -->
				<cover-view style="height: 40px; display: flex;flex-direction: row;align-items: center;justify-content: space-around;position: absolute;bottom: 0;">
					<cover-view @click="maskbtnclick(item2.btntype)" class="btns" v-for="(item2, index2) in contentdetail1.btns" :key="index2" :style="{'background-color':item2.color,'width': (100/btn.length)+'vw'}"  style="text-align:center;line-height:40px; height: 100%; color: #fff;  padding: 5px 0; display: flex;flex-direction: row;align-items: center;justify-content: center;">
						 {{item2.name}}
					</cover-view>
				</cover-view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS || H5 -->
				<view style="height: 40px; display: flex;flex-direction: row;align-items: center;justify-content: space-around;position: absolute;bottom: 0;">
					<view @click="maskbtnclick(item2.btntype)" class="btns" v-for="(item2, index2) in contentdetail1.btns" :key="index2" :style="{'background-color':item2.color,'width': (100/btn.length)+'vw'}"  style="text-align:center;line-height:40px; height: 100%; color: #fff;  padding: 5px 0; display: flex;flex-direction: row;align-items: center;justify-content: center;">
						 {{item2.name}}
					</view>
				</view>
				<!-- #endif -->
				</view>
		</view>
	</view>
</template>

<script>
	import {updaterowvalue} from '../../utils/representation.js'
	import textdigit from "../textdigit/textdigit.vue"
	import stylelayer from "../stylelayer/stylelayer.vue"
	import stylelist from "../stylelist/stylelist.vue"
	import imgcontent from "../imgcontent/imgcontent.vue"
	import content2 from "../content2/content2.vue"
	export default {
		components:{
			textdigit:textdigit,
			stylelayer:stylelayer,
			stylelist:stylelist,
			imgcontent:imgcontent,
			content2:content2
		},
		
		data(){
			return{
				texttype:'addminus',
				layertype:'chooselayer',
				listtype:'chooselist',
				tempdataList: [],
				tempbottomheadercount:{},
				tempcontentdetail1:{},
				maskheight:0,
				btn:[{'name':'取消','btntype':'cancel','color':'#aaa'},{'name':'确认','btntype':'ensure','color':'#f00'}],
				indexitem:0,
				indexgood:0,
				indexgooditem:0
			}
		},
		props:{
			contentdetail1:{
				type:Object
			},
			index:{
				type:Number
			},
			typeindex:{
				type:Number
			},
			styletype:{
				type:String
			},
			modcode:{
				type:String
			},
			pagename:{
				type:String
			},
			compute_rowcode:{
				type:String
			},
			datalist:{
				type:Array,
				default () {
					return []
				}
			},
			bottomheadercount:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		
		
		mounted:function(){
			var that = this
			console.log(that.contentdetail1)
			var contentdetail1 = that.contentdetail1
			that.tempcontentdetail1 = JSON.parse(JSON.stringify(that.contentdetail1)) 
			if(JSON.stringify(that.contentdetail1)!='{}'){
				var inputdetail = contentdetail1.inputdetail
				if(JSON.stringify(inputdetail)!='[]'){
					var listindex = 0
					for(var i=0;i<inputdetail.length;i++){
						if(inputdetail[i].coltype=='list'){
							inputdetail[i]['typeindex'] = listindex
							listindex++
						}
					}
				}
				contentdetail1.inputdetail = inputdetail
				that.contentdetail1 = contentdetail1
				that.$emit('changeListData',that.index,that.contentdetail1)
				
				var templength = 0
				for(var i=0;i<inputdetail.length;i++){
					if(inputdetail[i].visible){
						templength += 1
					}
				}
				var imglength = contentdetail1.showdetail.content.length
				that.maskheight = 10 + imglength*20 + templength * 44 + 80
			}
		},
		
		methods:{
			changeData(args){
				var that = this
				that.contentdetail1.inputdetail[args[1]] = args[2]
				that.indexgooditem = args[1]
				var obj = updaterowvalue(that.indexgooditem,0,0,that.contentdetail1,that.datalist,that.bottomheadercount)
				that.$options.methods.updateobj(that,obj)
			},
			
			updatelistvalue(content){
				var that = this
				that.$refs.stylelist[content.typeindex2].updatelistvalue(content)
			},
			
			maskbtnclick(btntype){
				var that = this
				that.indexitem  = 0
				that.indexgood  = 0
				if(btntype=='cancel'){
					that.$emit('changeListData2', that.index,that.tempcontentdetail1,false)
				}
				if(btntype=='ensure'){
					that.$emit('changeListData2',that.index,{},false)
				}
			},
			
			closemask(){
				var that = this
				that.iscontentdetail1 = true
				that.indexitem  = 0
				that.indexgood  = 0		
				that.$emit('changeListData2',that.index,that.tempcontentdetail1,false)
			},
			
			
			updateobj(that,obj){
				that.contentdetail1 = obj.contentdetail1
				that.$emit('changeListData2',that.index,that.contentdetail1,true)
			}
			
		}
	}
</script>

<style>
</style>
